<template>
  <div class="left">
    <div class="row1">
      <div class="title_name">
        <span>规划总面积</span><span class="eng">Total planned area</span>
      </div>
      <div class="bbox">
        <div class="line_box">
          <img src="../../public/img/are.png" class="licon" />
          <div class="lname">产业园面积</div>
          <div class="lnum">855 <span class="dw">公顷</span></div>
        </div>
      </div>
    </div>
    <div class="row2">
      <div class="title_name">
        <span>生产垃圾处理与回收</span
        ><span class="eng">Production waste treat</span>
      </div>
      <div class="bbox">
        <div id="ring"></div>
      </div>
    </div>
    <div class="row3">
      <div class="title_name">
        <span>生产垃圾处理与回收</span
        ><span class="eng">Production waste treat</span>
      </div>
      <div class="bbox">
        <div id="ring1"></div>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="r_row1">
      <div class="title_name">
        <span>土地面积</span><span class="eng">Land area</span>
      </div>
      <div class="bbox">
        <div id="ring2"></div>
      </div>
    </div>
    <div class="r_row2">
      <div class="title_name">
        <span>基础设施</span><span class="eng">infrastructure</span>
      </div>
      <div class="bbox">
        <div id="ybar"></div>
      </div>
    </div>
    <div class="r_row3">
      <div class="title_name">
        <span>建筑面积</span><span class="eng">built-up area</span>
      </div>
      <div class="bbox">
        <div id="xbar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getRing, getRing1, getRing2, getyBar, getxBar } from "@/utils/getecharts"
export default {
  data() {
    return {

    }
  },
  methods: {

  },
  mounted() {
    echarts.init(document.getElementById("ring")).dispose()
    var myChart = echarts.init(document.getElementById('ring'));
    getRing(myChart)
    echarts.init(document.getElementById("ring1")).dispose()
    var myChart = echarts.init(document.getElementById('ring1'));
    getRing1(myChart)
    echarts.init(document.getElementById("ring2")).dispose()
    var myChart = echarts.init(document.getElementById('ring2'));
    getRing2(myChart)
    echarts.init(document.getElementById("ybar")).dispose()
    var myChart = echarts.init(document.getElementById('ybar'));
    getyBar(myChart)
    echarts.init(document.getElementById("xbar")).dispose()
    var myChart = echarts.init(document.getElementById('xbar'));
    getxBar(myChart)
  }

}
</script>

<style scoped>
.row1 {
  width: 407px;
  height: 177px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
}
.row2 {
  width: 407px;
  height: 314px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-top: 40px;
  margin-left: 30px;
}
.row3 {
  width: 407px;
  height: 320px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-top: 40px;
  margin-left: 30px;
}
.title_name {
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: white;
  font-weight: bolder;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;

  z-index: 5;
}
.eng {
  font-size: 14px;
  margin-left: 10px;
}
.bbox {
}
.licon {
  width: 31px;
  height: 31px;
}
.line_box {
  margin-top: 30px;
  display: flex;
  align-items: center;
  padding: 0 50px;
}
.lname {
  color: white;
  font-size: 18px;
  margin-left: 5px;
}
.lnum {
  margin-left: 50px;
  color: rgba(3, 248, 255, 1);
  font-size: 26px;
}
.dw {
  font-size: 14px;
  color: white;
}
#ring {
  width: 325px;
  height: 189px;
  margin-left: 40px;
  margin-top: 30px;
}
#ring1 {
  width: 325px;
  height: 189px;
  margin-left: 40px;
  margin-top: 30px;
}
#ring2 {
  width: 325px;
  height: 189px;
  margin-left: 40px;
  margin-top: 30px;
}
#ybar {
  width: 363px;
  height: 220px;
  margin-left: 20px;
  margin-top: 10px;
}
#xbar {
  width: 363px;
  height: 220px;
  margin-left: 20px;
  margin-top: 10px;
}
.right {
  position: absolute;
  right: 30px;
  top: 110px;
}
.r_row1 {
  width: 407px;
  height: 305px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.r_row2 {
  width: 407px;
  height: 283px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.r_row3{
  width: 407px;
  height: 283px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
</style>